<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" src="${rctx}/basejs/jquery.slidepanel.setup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	screen_width = document.body.clientWidth;
	if (960 < screen_width) {
		$("#slidepanel").css("margin", "0 auto 0");
	}
	
    $("#loginForm").validate({
        errorLabelContainer : "#errorMessages",
        rules : {
          username : "required",
          password : "required"
        },
        messages : {
          username : {required : "请输入用户名！"},
          password : {required : "请输入密码！"}
        }
   	});
    $("input:reset").omButton();
    $("#guestBtn").omButton({width: 200});
});
</script>
</head>
<body>
		<div id="topbar" style="width: 100%;background:url('${rctx}/tab_l.gif') bottom left no-repeat #4A5155;position: static;">
		<div id="slidepanel" style="display: inherit;">
			<div class="topbox">
				<h2>Introduction</h2>
				<p>We already have created a new world,</p>
				<p>And we are capable of ruining it.</p>
				<p>We are programmers.</p>
				<p>The Maker of the 21st century!</p>
			</div>
			<div class="topbox">
				<h2>Guest Login Here</h2>
				<form id="guestForm2" action='${ctx}/user/guestLogin' method="post">
					<fieldset>
						<legend>Guest Login Form</legend>
						<div style="text-align: left;">
						<p>
							Be my guest!
						</p>
						<p>
							<button id="guestBtn" type="submit">Just have a look</button>
						</p>
						</div>
					</fieldset>
				</form>
			</div>
		<div class="topbox last">
        <h2>Administrator Login Here</h2>
        <form id="loginForm" action='${ctx}/user/login' method="post">
          <fieldset>
            <legend>Pupils Login Form</legend>
            <label for="pupilname">Username:
              <input type="text" name="username" id="username" value="" />
            </label>
            <label for="pupilpass">Password:
              <input type="password" name="password" id="password" value="" />
            </label>
            <label for="pupilremember">
              <input class="checkbox" type="checkbox" name="isRemeber" id="isRemeber" checked="checked" />
              Remember me</label>
            <p>
              <button id="loginBtn" type="submit">Login</button> &nbsp;
              <button id="ResetBtn" type="button">Reset</button>
            </p>
          </fieldset>
        </form>
      </div>     
		</div>
	</div>
	<div class="topbar"  style="width: 100%;background: #000000;position: static;">
		<div style="margin: 0 auto 0; width: 960px; position: relative;">
		<img alt="" src="${rctx}/login_bottom.jpg">
		</div>
	</div>
</body>
</html>